<template>
	<view class="bottom-btn u-flex u-flex-items-center" :style="[{background:conBg}]"
		:class="{fixed:fixed, isBottom:isBottom && fixed}">
		<slot>
			<u-button :custom-style="uBtnStyle" ripple @click="btnClick" :disabled="btnDisabled" :hair-line="false">
				{{text}}
			</u-button>
		</slot>
	</view>
</template>

<script>
	export default {
		name: "custom-button",
		props: {
			conBg: {
				type: String,
				default: '#ffffff'
			},
			btnWidth: {
				type: String,
				default: '100%'
			},
			color: {
				type: String,
				default: '#ffffff'
			},
			fontSize: {
				type: String,
				default: '32rpx'
			},
			bgColor: {
				type: String,
				default: '#fff'
			},
			borderRadius: {
				type: String,
				default: '16rpx'
			},
			text: {
				type: String,
				default: ''
			},
			fixed: {
				type: Boolean,
				default: false
			},
			isBottom: {
				type: Boolean,
				default: false
			},
			btnDisabled: {
				type: Boolean,
				default: false
			},
			btnBorder: {
				type: String,
				default: 'none'
			}
		},
		data() {
			return {

			};
		},
		computed: {
			uBtnStyle() {
				let style = {
					color: this.btnDisabled ? '#bdbdbd' : this.color,
					background: this.btnDisabled ? "#EAEBEF" : this.bgColor,
					borderRadius: this.borderRadius,
					fontSize: this.fontSize,
					width: this.btnWidth,
					border: this.btnBorder,
					height: '100rpx'
				}
				return style
			}
		},
		methods: {
			btnClick() {
				this.$u.debounce(() => {
					this.$emit('btnClick')
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.bottom-btn {
		padding: 16rpx 24rpx;
		width: 100%;

		&.fixed {
			position: fixed;
			z-index: 1;
		}

		&.isBottom {
			bottom: 0;
			left: 0;
			padding-bottom: calc(12rpx + constant(safe-area-inset-bottom));
			padding-bottom: calc(12rpx + env(safe-area-inset-bottom));
			// height: calc(100rpx + env(safe-area-inset-bottom)) ;
		}
	}
</style>
